<template>
  <div id="app">
    <!-- 根据路由判断是否显示导航栏 -->
    <header-nav v-if="showNav" />
    <router-view />
  </div>
</template>

<script setup>
import { ref, provide, computed } from 'vue'
import { useRoute } from 'vue-router'
import HeaderNav from './components/HeaderNav.vue'
import axios from 'axios'

// 配置 axios 默认值
axios.defaults.baseURL = 'http://localhost:5000'
axios.defaults.withCredentials = true

// 添加请求拦截器
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 添加响应拦截器
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token')
    }
    return Promise.reject(error)
  }
)

const headerNavRef = ref(null)

// 创建一个响应式对象来存储方法
const headerNavMethods = {
  async refreshCart() {
    if (headerNavRef.value) {
      return await headerNavRef.value.refreshCart()
    }
  },
  async refreshWishlist() {
    if (headerNavRef.value) {
      return await headerNavRef.value.refreshWishlist()
    }
  },
  async refreshCounts() {
    if (headerNavRef.value) {
      return await headerNavRef.value.refreshCounts()
    }
  }
}

// 提供方法
provide('headerNavMethods', headerNavMethods)

const route = useRoute()

// 计算是否显示导航栏
const showNav = computed(() => {
  const hideNavRoutes = ['/login', '/register', '/forgot-password', '/ai-chat']
  return !hideNavRoutes.includes(route.path)
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100vh;
}

/* 重置一些基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f5f7fa;
}

/* 移除链接默认样式 */
a {
  text-decoration: none;
  color: inherit;
}
</style>
